<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <table id="demo" lay-filter="test"></table>

<!--  表格工具栏  -->
    <script id="toolbarDemo" type="text/html">
        <div class="layui-btn-container">
            <!-- lay-event 给元素绑定事件名 -->
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">
                获取选中行数据
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
                获取选中数目
            </button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">
                验证是否全选
            </button>
        </div>
    </script>

<!--  表头工具栏  -->
    <script type="text/html" id="toolbarDemo2">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        </div>
    </script>
    <script>
        layui.use("table", function () {
            var table = layui.table;
            // 获取jquery对象
            var $ = layui.jquery;

            table.render({
                elem: "#demo", // 绑定元素
                height: 500,    // 容器高度
                url: "static/demo.json",
                page: true,      // 开启分页
                toolbar: "#toolbarDemo", // 设置表格工具栏
                cols: [[         // 设置表头
                    {field: "", type: "numbers"},
                    {field: "", type: "checkbox"},
                    {field: "id", title: "编号", width: 80, sort: true},
                    {field: "username", title: "姓名", width: 80, sort: true, edit: true},  // edit: true 开启单元格编辑
                    {field: "sex", title: "性别", width: 80, sort: true, edit: true},       // edit: true 开启单元格编辑
                    {field: "city", title: "城市", width: 80, sort: true, edit: true},      // edit: true 开启单元格编辑
                    {field: "sign", title: "签名", width: 80, sort: true},
                    {field: "experience", title: "经验值", width: 80, sort: true},
                    {field: "logins", title: "登录ID", width: 80, sort: true},
                    {field: "wealth", title: "财富", width: 80, sort: true},
                    {field: "classify", title: "分类", width: 80, sort: true},
                    {field: "score", title: "分数", width: 80, sort: true},
                    {title: "操作", toolbar: "#toolbarDemo2", align: "center"}  // 设置表头工具栏
                ]]
            });

            // 监听单元格编辑事件
            table.on("edit(test)", function (obj) {
                console.log(obj);
                // 获取修改的字段名
                var field = obj.field;
                // 获取所在行的所有相关数据
                var data = obj.data;
                // 获得修改后的值
                var value = obj.value;

                layer.msg("【ID: " + data.id + "】的" + field + "字段修改为：" + value);
            })

            // 监听行工具栏事件
            table.on("tool(test)", function (obj) {
                // 获取当前行数据
                var data = obj.data;
                console.log(data);
                // 获取当前点击的事件名：lay-event
                var event = obj.event;
                // 获取当前行tr的DOM对象
                var tr = obj.tr;
                console.log(event);
                if (event == "edit") {
                    // 输出框
                    layer.prompt({
                        // 表单元素的类型 0-文本框 1-密码框 2-文本域
                        formType: 0,
                        // 设置输入框的值
                        value: data.username,
                    }, function (value, index) {
                        // 修改指定单元格的值
                        // value表示输入的值
                        obj.update({
                            username: value
                        });
                        // 关闭弹出层
                        layer.close(index);
                    })
                } else if (event == "delete") {
                    layer.confirm("您真的要删除么？", function (index) {
                        // 指定删除DOM
                        obj.del();
                        // 关闭弹出层（index是当前弹出层的下标）
                        layer.close(index);
                    });
                }
            });

            // 监听头工具栏事件
            table.on("toolbar(test)", function (obj) {
                // console.log(obj);
                // obj.config对象中可以获取id属性值，即表示当前容器的ID属性值，也就是demo
                // 获取当前表格被选中记录对象，返回数据
                var checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
                // 获取事件名
                var event = obj.event;
                console.log(event);
                switch (event) {
                    case "getCheckData":
                        // 获取被选中的记录的数组
                        var arr = checkStatus.data;
                        layer.alert(JSON.stringify(arr));
                        break;
                    case "getCheckLength":
                        var length = checkStatus.data.length;
                        layer.msg("选中了" + length + "条");
                        break;
                    case "isAll":
                        var msg = checkStatus.isAll ? "全选" : "未全选";
                        layer.msg(msg);
                        break;
                }
            })
        });
    </script>
</body>
</html>